<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气折线图</title>
    <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
</head>

<body>
    <div style="text-align: center;">
        <input id="content" type="text" placeholder="请输入需要查询的城市" />
        <button id="btn">查询</button>
    </div><br/>

    <div id="box" style="border: 1px solid #000;  width: 100%; height: 500px;"></div>
    <script>
        var echartss = echarts.init(document.getElementById("box"));
        var btn=document.getElementById("btn");
        var content=document.getElementById("content");
        var option = {
            title: {
                text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['最低温度', '最高温度']
            },
            grid: {
                left: '5%',
                right: '8%',
                bottom: '5%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: [],

            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '最低温度',
                    type: 'line',
                    data: [],
                    itemStyle: {
                        normal: {
                            color: 'black',
                            borderColor: 'black',  //拐点边框颜色
                        }
                    },
                },
                {
                    name: '最高温度',
                    type: 'line',
                    data: [],
                    itemStyle: {
                        normal: {
                            color: 'red',
                            borderColor: 'red',  //拐点边框颜色
                        }
                    },
                }

            ]
        };
        echartss.setOption(option);

        function t_json(data)
        {
            //变量
            var arr1=new Array();
             var arr2=new Array();
             var arr3=new Array();
             //解析json
            var str=JSON.parse(data);
            //for循环
          str.result.future.forEach(element => {
              //获取日期
           var date = element.date.toString()
           //去掉温度的℃
           var replace = element.temperature.toString().replace("℃","");
           //以/分割字符
            var str = replace.split("/");
            //把数据放入Array数组中
            arr1.push(str[0]);
            arr2.push(str[1]);
            arr3.push(date);
          });
          option.series[0].data=arr1;
          option.series[1].data=arr2;
          option.xAxis.data=arr3;
          
          //更新视图
          echartss.setOption(option);
        }
        //传给Android数据
        btn.onclick=function getContent()
        {
           javascript:text.web_text(content.value);
        }

    </script>
</body>

</html>